<template>
  <div>
    <div class="table-header clear-fix">
      <ButtonGroup>
        <Button @click="queryList()" type="primary">刷新</Button>
        <Button @click="openDialog('create')" type="primary">新建</Button>
        <Button @click="batchRemove" type="primary">批量删除</Button>
        <Button @click="createWiki" type="primary">生成wiki</Button>
      </ButtonGroup>

      <Page
        class="fl"
        :total="total"
        show-elevator
        show-sizer
        show-total
        :page-size-opts="[10, 20, 50, 100]"
        @on-change="pageNumChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
    <Table
      border
      ref="postTable"
      :columns="columns"
      :data="tableDate"
      :loading="loading"
      style="width: 100%;"
    >
      <template slot-scope="{ row, index }" slot="user">
        <!-- <user-card :user="row" /> -->
        <span></span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <ButtonGroup size="small">
          <Button type="primary" @click="removeDialog(row, index)">删除</Button>
          <Button type="error" @click="openDialog('update',row, index)">修改</Button>
        </ButtonGroup>
      </template>
    </Table>
    <Modal v-model="dialogVisible" :title="formType === 'create'? '新建分享' : '修改分享'">
      <share-form v-if="dialogVisible" v-model="post" ref="postForm"></share-form>
      <div slot="footer">
        <Button type="primary" size="large" @click="submit">确认</Button>
      </div>
    </Modal>
    <Modal v-model="removeVisible" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>请确认是否删除？</span>
      </p>
      <div slot="footer">
        <Button type="error" size="large" long @click="remove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import pageMixin from "@/mixins/pagation";
import { update, create, remove, pageQuery } from "@/api/post";
import Post from "@/api/post";
import ShareForm from "./components/ShareForm";
export default {
  mixins: [pageMixin],
  components: {
    ShareForm
  },
  data() {
    const columns = [
      {
        type: "selection",
        width: 60,
        align: "center",
        fixed: "left"
      },
      // {
      //   title: "id",
      //   key: "objectId"
      // },
      {
        title: "标题",
        key: "title",
        fixed: "left"
      },
      {
        title: "地址",
        key: "url"
      },
      {
        title: "分类",
        key: "type"
      },
      {
        title: "描述",
        key: "desc"
      },
      {
        title: "推荐人",
        key: "username",
        slot: "user"
      },
      {
        title: "推荐时间",
        key: "createdAt"
      },
      {
        title: "更新时间",
        key: "updatedAt"
      },
      {
        title: "操作",
        slot: "action",
        align: "center",
        fixed: "right",
        width: 120
      }
    ];
    return {
      columns,
      post: {},
      tableDate: [],
      formType: "create",
      dialogVisible: false,
      removeVisible: false,
      requestParams: {}
    };
  },
  methods: {
    queryList(pageNum) {
      this.loading = true;
      pageNum && (this.pageNum = pageNum);
      pageQuery(this.requestParams, this.pageNum, this.pageSize)
        .then(({ list, total }) => {
          this.loading = false;
          this.tableDate = list;
          this.total = total;
          return total;
        })
        .catch(err => {
          this.loading = false;
          this.$Message.error("请求失败");
        });
    },
    openDialog(type, row) {
      this.formType = type;
      row && (this.post = JSON.parse(JSON.stringify(row)));
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.post = {};
    },
    async submit() {
      if (!(await this.$refs.postForm.validate())) {
        this.dialogVisible = true;
        return this.$Message.error("请完善表单");
      }
      if (this.formType === "create") {
        create(this.post)
          .then(() => {
            this.queryList();
            this.closeDialog();
          })
          .catch(error => {
            this.$Message.error(error);
          });
      } else {
        update(this.post)
          .then(() => {
            this.queryList();
            this.closeDialog();
          })
          .catch(error => {
            this.$Message.error(error);
          });
      }
    },
    removeDialog(row, index) {
      this.post = JSON.parse(JSON.stringify(row));
      this.removeVisible = true;
    },
    remove() {
      remove(this.post).then(res => {
        this.queryList();
        this.removeVisible = false;
      });
    }
  },
  mounted() {
    this.queryList(1);
  }
};
</script>

<style>
.table-header {
  padding-bottom: 12px;
}
.clear-fix {
  clear: both;
}
.fl {
  float: right;
}
</style>

